<template>
  <a-card :title="name" hoverable @click="goDetail" class="scale">
    <template #extra>
      <a-tag :color="color">{{ type }}</a-tag>
    </template>
    <div class="grid gap-y-2">
      <div class="flex items-end justify-between">
        <div>
          <a-tag class="code">{{ code }}</a-tag>
        </div>
        <div class="flex flex-col items-end status">
          <a-tag color="blue" v-if="status === Status.Normal">正常</a-tag>
          <a-tag color="purple" v-else-if="status === Status.Discarded"
            >报废</a-tag
          >
          <a-tag color="red" v-else>删除</a-tag>
        </div>
      </div>
      <p>部门：{{ department }}</p>
      <p>品牌：{{ brand }}</p>
      <p>修改时间：{{ updatedAt }}</p>
    </div>
  </a-card>
</template>

<script lang="ts">
import { computed, defineComponent, PropType, reactive } from "vue";
import { CloudDevice } from "model";
import { useRouter } from "vue-router";
import { DeviceStatus } from "@/@types/enum";
import { Random } from "mockjs";
import moment from "moment";

export default defineComponent({
  name: "DeviceCard",
  props: {
    device: {
      type: Object as PropType<CloudDevice>,
      required: true,
    },
  },
  setup(props) {
    const device = reactive(props.device);
    const id = computed(() => device.id);
    const type = computed(() => device.type);
    const name = computed(() => device.name);
    const code = computed(() => device.code);
    const department = computed(() => device.department);
    const Status = {
      Normal: DeviceStatus.NORMAL,
      Deleted: DeviceStatus.DELETED,
      Discarded: DeviceStatus.DISCARDED,
    };
    const status = computed(() => device.status);
    const brand = computed(() => device.brand);
    const updatedAt = computed(() => {
      if (device.updatedAt) {
        return moment(device.updatedAt).format("YYYY-MM-DD");
      } else {
        return "无";
      }
    });
    const router = useRouter();
    const goDetail = () => {
      router.push({
        name: "DeviceDetail",
        params: {
          id: id.value,
        },
      });
    };
    const color = Random.color();
    return {
      type,
      code,
      department,
      id,
      status,
      name,
      goDetail,
      brand,
      updatedAt,
      Status,
      color,
    };
  },
});
</script>

<style scoped lang="scss"></style>
